<template>
  <div>
    <el-button :disabled="this.$props.disabled" type="text" @click="showrplay">
      播放
    </el-button>
    <el-dialog
      v-if="rplay"
      :visible.sync="rplay"
      title="音频播放"
      :close-on-click-modal="false"
    >
      <el-alert
        :closable="false"
        :title="`长时间加载不出来可以尝试刷新页面哦。`"
        type="info"
      ></el-alert>
      <div>
        <vue-audio-native
          size="default"
          :url="url"
          :show-current-time="showCurrentTime"
          :show-controls="showControls"
          :show-volume="showVolume"
          :show-download="showDownload"
          :autoplay="autoplay"
          :hint="hint"
          :wait-buffer="waitBuffer"
          :download-name="downloadName"
          @on-change="change"
          @on-timeupdate="timeupdate"
          @on-metadata="metadata"
          @on-audioId="audioId"
        ></vue-audio-native>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'AudioPlay',
    props: {
      disabled: {
        type: Boolean,
        default: false,
      },
      audiourl: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        rplay: false,
        url: this.$props.audiourl,
        showCurrentTime: true, //默认true，是否显示当前播放时间
        showControls: false, //默认false，true:展示原生音频播放控制条，false：展示模拟播放控制条
        showVolume: true, //默认true，默认显示音量调节和静音按钮 true显示音量调节和静音按钮
        showDownload: true, //默认true，默认显示下载按钮
        autoplay: false, //默认false，自动播放有效音频(由于高版本浏览器协议限制，初始化页面时无法自动播放，可以在点击页面后手动触发)
        waitBuffer: true, //默认true，拖拽到未加载的时间，是否需要等待加载，true:滑块位置不动，等待加载音频资源后播放，false：当滑动位置大于当前缓冲的最大位置，则重置到当前最大缓冲位置
        downloadName: '下载音频', //默认“下载音频”，在Chrome和火狐、同域名下，修改下载文件名称，其它保持原文件服务器名称
        hint: '音频正在加载中，请稍等…', //无音频情况下提示文案
        currentAudioId: [], //当前正在播放的audio id数组
      }
    },
    methods: {
      showrplay() {
        if (this.$props.audiourl === '' || this.$props.audiourl === null) {
          this.$message.error('您还没有进行语音提取操作哦！')
        } else {
          this.url = this.$props.audiourl
          this.rplay = true
        }
      },
      change(event) {
        // console.log('当前播放状态：', event)
      },
      timeupdate(event) {
        // console.log('当前播放时间：', event)
      },
      metadata(event) {
        // console.log(event, '音频长度：', event.target.duration)
      },
      //获取渲染能够播放音频currentAudioId，可存全局，用以播放和暂停音频
      audioId(event) {
        // console.log(event, 9999999)
        this.currentAudioId.push(event)
      },
      //通过音频列表的下标获取渲染能够播放音频currentAudioId即组件的id，并使用组件的id，用来开始播放录音
      play(index) {
        document.getElementById(this.currentAudioId[index]).play()
      },
      //通过音频列表的下标获取渲染能够播放音频currentAudioId即组件的id，并使用组件的id，，用来暂停播放录音
      pause(index) {
        document.getElementById(this.currentAudioId[index]).pause()
      },
    },
  }
</script>

<style scoped></style>
